<template>
  <div class="container">
    <menu-item></menu-item>
    <div class="content-wrap">
      <div class="content">
        <el-scrollbar element-loading-background="transparent" v-loading="loading">
          <div class="item-wrap">
            <div v-for="(item, index) in tableList" :key="index" class="item">
              <div class="left">
                <img @click="handlePreview(item)" :src="item.cover" alt />
              </div>
              <div class="right">
                <div class="up">
                  <div class="title">{{ item.title }}</div>
                  <div class="time">{{ item.createTime }}</div>
                </div>
                <div class="down">{{ item.titleSub }}</div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <div class="dialog">
      <van-overlay
        z-index="100"
        :lock-scroll="false"
        :show="dialogVisible"
        @click="dialogVisible = false"
      >
        <div class="wrapper" @click.stop>
          <div class="w-img">
            <img :src="previewInfo.cover" alt />
          </div>
          <div class="w-content">
            <div class="up">
              <div class="title">{{ previewInfo.title }}</div>
              <div class="time">{{ previewInfo.createTime }}</div>
            </div>
            <div class="down">{{ previewInfo.titleSub }}</div>
          </div>
          <div class="back">
            <img @click="handleBack" src="@img/shxx/shxx_29.png" alt />
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script setup>
import menuItem from "@/components/common/menuItem.vue";
import { getKnowledge } from "@/apis/subjectInfo";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const router = useRouter();
const tableList = ref();
let loading = ref(false);
const getList = () => {
  loading.value = true;
  getKnowledge().then(res => {
    tableList.value = res.data;
    loading.value = false;
  });
};
getList();
const dialogVisible = ref(false);
const previewInfo = ref();
const handlePreview = item => {
  previewInfo.value = item;
  dialogVisible.value = true;
  // showImagePreview({ images: [list], closeable: true });
};
const handleBack = () => {
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content-wrap {
    // height: 460px;
    flex: 1;
    display: flex;
    flex-direction: column;
    .content {
      padding-top: 20px;
      // height: 430px;
      .el-scrollbar {
        height: 100%;
      }
      .item-wrap {
        height: 100%;
        .item {
          height: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .left {
            width: 143px;
            height: 97px;
            img {
              width: 143px;
              height: 97px;
              border-radius: 10px;
            }
          }
          .right {
            height: 97px;
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title {
              font-family: SourceHanSansCN, SourceHanSansCN;
              font-weight: bold;
              font-size: 15px;
              color: #ffffff;
              line-height: 17px;
              text-align: justifyLeft;
            }
            .time {
              margin-top: 6px;
              font-family: SourceHanSansCN, SourceHanSansCN;
              font-weight: 400;
              font-size: 9px;
              color: #d7ddeb;
              line-height: 9px;
              text-align: justifyLeft;
            }
            .down {
              letter-spacing: 0.1em;
              font-family: SourceHanSansCN, SourceHanSansCN;
              font-weight: 400;
              font-size: 8px;
              color: #eceff6;
              line-height: 13px;
              text-align: justifyLeft;
            }
          }
        }
      }
    }
  }
}
.wrapper {
  height: 100%;
  background: url("@img/shxx/shxx.png");
  background-size: cover;
  // background: #fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .w-img {
    margin-top: 80px;
    height: 400px;
    width: 470px;
    img {
      height: 100%;
      width: 100%;
      border-radius: 20px;
    }
  }

  .w-content{
    width: 80%;
    margin-top: 10px;
    color: #fff;
    .title{
      font-size: 18px;
    }
    .time{
      margin: 10px 0;
    }
  }
  .back {
    position: absolute;
    right: 20px;
    bottom: 200px;
    img {
      width: 80px;
    }
  }
}
</style>
